<template>
  <div>
    <div>

      <!-- 修改用户信息 -->
      <div class="box_big" v-show="xg">
        <div>
          <div>
            <p>修改信息</p>
            <button @click="dddd"><img src="../assets/叉.png" alt=""></button>
          </div>
          <div>
            <p>当前密码</p>
            <input type="password" placeholder="请输入您的旧密码" @blur="godd" v-model="pwd">
            <p>*修改信息必须填写当前密码</p>
            <div class="xmm">
              <div>
                <p>新密码</p>
                <input type="password" placeholder="请输入新的密码" v-model="xpwd" @blur="goxpwd">
                <p>* 请使用6-20位非单一种类字符</p>
              </div>
              <div>
                <p>确认密码</p>
                <input type="password" placeholder="请输入确认密码" v-model="qxpwd" @blur="goqxpwd">
              </div>
            </div>
            <!--  -->
            <div class="xmm">
              <div>
                <p>新手机号码</p>
                <input type="text" placeholder="请输入11位有效的手机号码" v-model="xphone" @blur="goxphone">
                <!-- <p>* 请使用6-20位非单一种类字符</p> -->
              </div>
              <div class="yzm">
                <p>验证码</p>
                <input type="text" placeholder="请输入验证码(不区分大小写)" v-model="yz" @blur="goyz">
                <p class="yz"><span @click="refreshCode" style="cursor: pointer">
                    <s-identify :identifyCode="identifyCode"></s-identify>
                  </span></p>
              </div>
            </div>

          </div>
          <div class="fool">
            <button @click="xg = 0">取消</button>
            <button @click="tjxg">保存</button>
          </div>
        </div>
      </div>

      <!-- 修改用户信息 -->

    </div>
    <!--  -->
    <div class="box">
      <div class="big">
        <div class="top">
          <div><img src="../assets/购物.png" alt="" /></div>
          <div>
            <h2>用户中心</h2>
            <p>--&nbsp;{{ uname }}&nbsp;--</p>
          </div>
        </div>
        <div class="butoom">
          <ul>
            <li v-for="(x, i) in title" :key="i" :class="{ active: now == i }" @click="now = i">
              <router-link :to="x.href">{{ x.title }}</router-link>
            </li>
            <!-- <li>待付款</li>
                        <li>已付款</li>
                        <li>待收货</li>
                        <li>待评价</li>
                        <li>消息</li> -->
          </ul>
          <ul>
            <li @click="xg = 1">修改数据</li>
            <li>|</li>
            <li @click="gotc">退出</li>
          </ul>
        </div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import SIdentify from "@/components/identify";
export default {
  components: { SIdentify },
  data() {
    return {
      title: [
        { title: "全部订单", href: "/meaning/home" },
        { title: "待付款", href: "/meaning/home" },
        { title: "已付款", href: "/meaning/home" },
        { title: "待收货", href: "/meaning/home" },
        { title: "待评价", href: "/meaning/home" },
        { title: "消息", href: "/meaning/notice" },
      ],
      now: "",
      xg: 0,
      title2: ["修改信息", "|", "退出"],
      pwd: "",
      xpwd: "",
      qxpwd: "",
      xphone: "",
      phone: '',
      // 图片验证码
      identifyCode: "",
      // 验证码规则
      // identifyCodes: "3456789ABCDEFGHGKMNPQRSTUVWXY",
      identifyCodes: "3456789qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDFSAZXCVBNM",
      yz: '',
      uname: '',
      //验证修改表单
      a: '',
      b: '',
      c: '',
      d: '',
      e: '',

    };
  },
  // 
  mounted() {
    //页面刷新随机刷新一组验证码
    this.refreshCode();
    this.godata();
  },
  methods: {
    godata() {
      let phone = localStorage.token;
      let params = `uphone=${phone}`;
      this.axios.post('users/uname', params).then((res) => {
        // console.log('uname:',res.data.data[0].uname);
        // this.data=res.data
        // console.log(this.data);
        if (res.data.code == 404) {
          // this.$store.commit('updateUname', '')
          // localStorage.setItem("token", '');
          window.onbeforeunload = function (e) {
            var storage = window.localStorage;
            storage.clear();

          }
        } else {
          this.uname = res.data.data[0].uname;
          this.$store.commit('updateUname', this.uname)
        }
      })
    },
    //提交修改请求接口
    tjxg() {
      if (this.a == 1 && this.b == 1 && this.c == 1 && this.e == 1) {
        let phone = localStorage.token;
        let params = `uphone=${phone}`;
        this.axios.post('users/uname', params).then((res) => {
          // console.log('uname:',res.data.data[0].uname);
          // this.data=res.data
          // console.log(this.data);
          this.uname = res.data.data[0].uname;
          let params = `upwd=${this.xpwd}&uphone=${this.xphone}&uname=${this.uname}`;
          //  let phone = localStorage.token;
          this.axios.post('users/update', params).then((res) => {
            alert('修改成功')
            //  localStorage.setItem("token",this.xphone);
            localStorage.setItem("token", "");
            this.$store.commit("updateUname", "");
            localStorage.token = "";
            this.$router.push("/login");
          })
        })
      } else {
        alert('修改失败,请检查填写信息是否格式正确')
      }

    },

    // 切换验证码
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
      // console.log(this.identifyCode);
    },
    // 生成随机验证码
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode +=
          this.identifyCodes[
          Math.floor(Math.random() * (this.identifyCodes.length - 0) + 0)
          ];
      }
    },
    //清空所有输入框的值
    dddd() {
      this.xg = 0,
        this.pwd = ''
      this.xpwd = ''
      this.qxpwd = ''
      this.xphone = ''
    },
    goyz() {
      // console.log('失去交点');

      // console.log( '获取的验证码随机值:',this.identifyCode); 
      //  console.log( this.identifyCode.toLowerCase());
      //  console.log( this.identifyCode.toUpperCase());
      // console.log(this.yz.toUpperCase()[1]);
      if (this.yz.toUpperCase() == this.identifyCode.toUpperCase()) {
        this.$message({
          message: '验证成功',
          type: 'success'
        });
        this.e = 1
      }
      // else if(this.yz==''){
      //      this.$message.error("验证码不能为空");
      //   }
      else {
        this.$message.error('验证码错误,请重新输入');
      }
    },
    godd() {
      // console.log('失去焦点', this.pwd);
      let phone = localStorage.token;
      let params = `upwd=${this.pwd}&uphone=${phone}`;
      this.axios.post('users/something', params).then((res) => {

        console.log("失去焦点:", res);
        if (res.data.code == 201) {
          this.$message({
            message: "密码验证正确",
            type: "success",
          });
          this.a = 1
        } else if (this.pwd == '') {
          this.$message.error("密码不能为空");
        } else {
          this.$message.error("与当前密码不一致,请从新输入");
        }
      });
    },
    goxpwd() {
      // console.log('失去焦点');
      let xpwd = /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[a-z])\S*$/;

      if (!xpwd.test(this.xpwd)) {
        // 失败
        this.$message({
          message: "密码强度不够,请包含数字及大小写字母",
          type: "warning",
        });
        // console.log(this.xpwd);
        // return false;
      } else if (this.pwd == this.xpwd) {
        this.$message.error("不能与当前密码相同,请重新输入");
      } else {
        //成功
        console.log(this.xpwd);
        this.b = 1
        return true;
      }
    },
    goqxpwd() {
      console.log("失去焦点");
      if (this.qxpwd == this.xpwd) {
        // alert('密码一致')
        this.c = 1
      }
      // else if(this.qxpwd==''){
      //     //  this.$message.error("确认密码不能为空");
      //   } 
      else {
        this.$message({
          message: "两次密码不一致",
          type: "warning",
        });
      }
    },
    goxphone() {
      let xphone = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
      if (this.xphone == '') {
        this.$message.error("手机号码不能为空");
      }
      else if (xphone.test(this.xphone)) {
        // this.$message({
        //   message: "手机号码格式验证正确",
        //   type: "success",
        // });
        let params = `uphone=${this.xphone}`;
        this.axios.post('users/somephone', params).then((res) => {
          if (res.data.code == 201) {
            // console.log(res);
            //   this.$message({
            //   message: "该手机号码可以使用",
            //   type: "success",
            // });
            this.d = 1
          } else {
            // this.$message.error("手机号码与当前号码重复");
            this.$message({
              message: "手机号可用",
              type: "success",
            });
          }
        })
      } else {
        // this.$message.error("手机号可用");
        this.$message({
          message: "手机号可用",
          type: "success",
        });
      }
    },
    gotc() {
      localStorage.setItem("token", "");
      this.$store.commit("updateUname", "");
      localStorage.token = "";
      window.onbeforeunload = function (e) {
        var storage = window.localStorage;
        storage.clear();
      };
      this.$router.push("/");
      this.person = localStorage.token ? true : false;
    },
  },
};
</script>

<style scoped src="../assets/css/meaning.css">
</style>

<style lang="scss" scoped>
input.active {
  border: 1px solid red;
}
</style>

